$(document).ready(function(){


    // 第一个图表
    // 图表创建
    var chartLineThree = echarts.init(document.getElementById('chartLineThree'));
    var lineThreeData  = [[1,10,'aa'],[5,13,'bb'],[8,13.3,'cc'],[10,11.2,'dd'],[15,14.7,'ee'],[20,13.3,'ff'],[25,13.3,'gg'],[30,10,'hh']];
    chartLineThree.setOption({
        title: {
            text: 'Este gráfico refleja la tensión de la bateria en los últimos 30 dias',
            textStyle:{
                color:'#336699',
                fontWeight:'normal'
            },
            left:60
        },
        tooltip: {
            trigger: 'axis',
            formatter:function(params){
                console.log(params)
                return 'july '+params[0].axisValue+'<br>Este gráfico '+params[0].data.value+'<br>'+params[0].data.info;
            }
        },
        xAxis: {
            // type:"value",
            // min:1,
            // max:30,
            boundaryGap:false,
            axisLabel:{
                formatter: 'july {value}'
            },
            data: lineThreeData.map(function (item) {
                return item[0];
            })

        },
        yAxis: {
            type:"value",
            splitLine: {
                show: true,
                lineStyle:{
                    type:"dashed"
                },
            },
            min:10,
            max:17,
            axisLabel:{
                formatter: '{value} V'
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start:0,
                end:100
            },
            {
                type: 'slider',
                start:0,
                end:100,
                backgroundColor:'#ffe198',
                fillerColor:'#f5b620',
                borderColor:'#e3a100',
                handleStyle:{
                    color:'#bc5400'
                }
            }
        ],
         visualMap: {
            show: true,
            dimension: 1,
            right:120,
            top:20,
            pieces: [
            {
                gt: 0,
                lte: 11,
                color: '#ff9c00'
            }, {
                gt: 11,
                lte: 12,
                color: '#fa1d6b'
            }, {
                gt: 12,
                lte: 20,
                color: '#00a0e9'
            }],
            formatter:'{value}v-{value2}v',
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            // name: 'Beijing AQI',
            type: 'line',
            data: lineThreeData.map(function (item) {
                return {value:item[1], info:item[2]};
            }),
            markLine: {
                silent: true,
                data: [{
                    yAxis: 12
                }, {
                    yAxis: 14
                }, {
                    yAxis: 16
                }]
            },
            areaStyle: {normal: {
                color:"#daf8f6"
            }}
        }
    });

    // 第二个图表

    var _arr = [0,0,0,0,0,0,0,0,0,15,20,10,10,10,0,0,0,20,0,20,0,0,0]

	// 图表创建
	var myChart = echarts.init(document.getElementById('chartsDiv'));
    myChart.setOption({
    title: {
        text: 'Horario actual:Horario 3',
        textStyle:{
                color:'#336699',
                fontWeight:'normal'
            },
        left:60
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    // toolbox: {
    //     show: true,
    //     feature: {
    //         saveAsImage: {}
    //     }
    // },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['17:00', '17:30', '18:00', '18:30', '19:00', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30', '24:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:30', '05:00', '05:30'],
        splitLine:{
            show:true
        },
        axisLabel:{
            interval:0,
            rotate:90
        }
    },
    yAxis: [{
        type: 'value',
        data:[0,15,30],
        max:30,
        min:0,
        position:'right',
        show:false
    },
    {
        type: 'category',
        boundaryGap: false,
        data:['Off','Eco','Max'],
        position:'left'
    }],
    series: [
        {
            type:'bar',
            data: _arr,
            itemStyle:{
                normal:{
                    color:'#a0cdf8'
                },
                emphasis:{
                    color:'#379af9'
                }
            },
            markLine:{
                data:[
                    {
                        name: '平均线',
                        // 支持 'average', 'min', 'max'
                        type: 'average',
                        lineStyle:{
                            normal:{
                                color:'#ff0000'
                            }
                        }
                    },
                    {
                        name: 'Y 轴值为 15 的水平线',
                        yAxis: 15,
                        lineStyle:{
                            normal:{
                                color:'#acacac'
                            }
                        }
                    }
                ]
            }
        },
        {
            type:'line',
            data: _arr,
            itemStyle:{
                normal:{
                    color:'#565656'
                }
            },
            markPoint:{
                data: [
                    { name:'zz', value:20, yAxis:10, xAxis: 13},
                    { name:'cc', value:10, yAxis:20, xAxis: 17}
                ],
                itemStyle:{
                    normal:{
                        color:'#ff0000'
                    }
                }
            }
        }
    ]
});


})